<template>
  <div class="data-card">
    <custom-card :title="config.title"
                 :loading="loading"
                 :description="config.description">
      <template slot="action">
        <Button type="primary"
                v-for="(item,name) in config.manage.actions"
                :key="name">{{ item.label }}
        </Button>
      </template>
      <div class="main">
        <search-form :config="config"></search-form>
        <div class="tool">
          <batch-handle :config="config"></batch-handle>
          <quick-search v-if="config.manage.hasOwnProperty('search')"></quick-search>
        </div>
        <data-table :data="data.items"></data-table>
        <div class="bottom">
          <div class="statistics">
            <span><strong>总余额：</strong>123222</span>
            <span><strong>冻结金额：</strong>45432</span>
          </div>
          <Page :total="100"
                show-total
                show-sizer
                show-elevator></Page>
        </div>
      </div>
    </custom-card>
  </div>
</template>

<script>
  export default {
    name: "DataCard",
    data() {
      return {
        data: {
          items: []
        },
        search: {},
        loading: false
      }
    },
    created() {},
    methods: {
      reloadData() {
        this.loading = true
        this.$axRequest({
          url: this.config.api,
          method: 'get',
          params: this.search,
          success: (response) => {
            this.$set(this, 'data', response.data)
            this.loading = false
          },
          error: (response) => {
            this.loading = false
            this.$Message.error(response.data.msg)
          }
        })
      }
    },
    props: {
      config: {
        type: Object,
        require: true
      }
    }
  }
</script>

<style scoped
       lang="less">
  .data-card {
    .main {
      .tool {
        display: flex;
        justify-content: space-between;
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: @spaceCol;

        .statistics {
          & > * {
            margin-right: @spaceCol;
          }
        }
      }
    }
  }
</style>